<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/report-list.css"/><!--研报列表-->
    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">
    <title>研报</title>
    <style>
        body {
            background-color: white;
        }

        .index-report-search {
            width: 100%;
            height: 0.64rem;
            background-color: #F2F2F2;
            border-radius: 0.32rem;
            line-height: 0.64rem;
        }

        .index-report-search-icon {
            width: 0.88rem;
            height: 100%;
        }

        .index-report-search-icon span {
            padding-left: 0.32rem;
            color: #B7B7B7;
        }

        .index-report-input {
            height: 100%;
            width: 5.4rem;
        }

        .index-report-input input {
            color: rgba(34, 34, 34, 0.38);
            height: 0.4rem;
            width: 100%;
        }

        .index-report-special-wrap {
            width: 100%;
            margin-top: 0.32rem;
        }

        .index-report-div {
            height: 0.16rem;
            width: 100%;
            background-color: #f6f6f6;
            margin-top: 0.52rem;
        }

        .index-report-special-item {
            margin-right: 0.32rem;
            border-radius: 0.1rem;
            width: 1.7rem;
            height: 2.24rem;
        }

        .index-report-special-item-pdf {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 0.06rem 0;
            color: white;
            padding: 0.04rem 0.08rem;
        }

        .index-report-sticky {
            top: 0;
            z-index: 20;
            background-color: white;
        }

        .index-report-data-sources {
            margin-top: 0.28rem;
            width: 100%;
        }

        .index-report-list {
            /*height:7.2rem;*/
        }

        .index-report-tab {
            padding: 0.1rem 0.24rem;
            margin-right: 0.2rem;
            background-color: #f6f6f6;
            border-radius: 0.3rem;
            color: rgba(34, 34, 34, 0.6);
        }

        .index-report-tab-active {
            color: #2C68FF;
            border-bottom: 0;
        }

    </style>
</head>
<body>

<div class="flex-column h-100-p ff400 fs14">
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar pos-f"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1">京东研究</div>
            <div class="right-bar">
                <!--<span class="iconfont iconsousuo-01 fs16"></span>-->
            </div>
        </div>
    </div>
    <div id="mescroll" class="flex-1 mescroll">

        <!--专题列表图-->
        <div class="index-report-special-wrap flex-row scoll-x mescroll-touch-x">
            <div class="index-report-special-content flex-row">

            </div>
        </div>
        <!--分割线-->
        <div class="index-report-div"></div>
        <div class="index-report-sticky pos-s">
            <div class="index-report-data-sources flex-row fs16">
                <div class="index-report-data-content scoll-x flex-row fs12 mescroll-touch-x">

                </div>
            </div>
        </div>
        <div class="index-report-list flex-column mt10" >
        </div>
    </div>

</div>

</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>
<script src="../../plugin/mescroll/js/mescroll.min.js"></script>
<script>
  let meScroll
  let pm = {
    isScroll: false,
    pageNum: 1,
    pageSize: 10,
    wordParams: [],
    dataSource: '',
    paramKey: '100',
    scrollTop: 0,
    index: 0
  }

  function initPage(params) {
    Utils.sbhAdaptive()

    pageScroll()
    pageMescroll()

    //下拉刷新、滚动加载
    meScroll = Template.createMeScroll({
      id: 'mescroll', //区域ID
      pageNum: pm.pageSize,
      downCallback: refreshAchive, //下拉刷新入口
      upCallback: getInfoListForResearch //滚动加载入口
    })
  }

  function startPage(params) {
    //研报专题列表刷新
    $('.readCnt_' + params.infoId).html(params.readCnt)
    $('.commentCnt_' + params.infoId).html(params.commentCnt)
  }

  function reLoadPage(){
    refreshAchive()
  }

  function refreshAchive() {
    pm.pageNum = 1
    getResearchTopicInfos()
    getWordParam()
  }

  //研报列表
  function getInfoListForResearch() {
    Server.indexReport.getInfoListForResearch({
      pageNum: pm[pm.paramKey].pageNum,
      pageSize: pm[pm.paramKey].pageSize,
      infoType: 8,
      isRecommend: '',
      dataSource: pm[pm.paramKey].dataSource
    }).then(function (data) {
      let htmlStr = ''
      data.infoListForResearchs.forEach(function (item) {
        htmlStr += Template.reportList(item)
      })
      $('.index-report-' + pm.paramKey).append(htmlStr)
      if (data.infoListForResearchs && data.infoListForResearchs.length >= pm.pageSize) {
        pm[pm.paramKey].isScroll = true
      } else {
        $('.more').html('暂无更多数据')
        pm[pm.paramKey].isScroll = false
      }

      pm[pm.paramKey].pageNum++

      //下拉刷新结束回调
      meScroll.endSuccess(data.infoListForResearchs.length, data.infoListForResearchs.length === pm.pageSize)
    }).catch((error) => {
      meScroll.endErr()
    })
  }

  // 研报专题列表（目前查詢100个）
  function getResearchTopicInfos() {
    Server.indexReport.getResearchTopicInfos({
      pageNum: 1,
      pageSize: 100,
      status: 1
    }).then(function (data) {
      let htmlStr = ''
      data.researchTopicInfos.forEach(function (item, index) {
        htmlStr += '<div class=\'index-report-special-item flex-row  flex-direction-row\' onclick=\'goResearchTopic("' + item.topicCode + '")\' style=\'background:url(' + item.coverImgUrl + ') no-repeat center;background-size: auto 100%; ' + (index === 0 ? 'margin-left:0.32rem' : '') + '  \'>'
        htmlStr += '<div class=\'flex-column justify-content-end\'>'
        htmlStr += '<div class=\'index-report-special-item-pdf fs11\'>PDF</div>'
        htmlStr += '</div>'
        htmlStr += '</div>'
      })
      $('.index-report-special-content').html(htmlStr)
    })

  }

  // 获取来源
  function getWordParam() {
    Server.indexReport.getWordParam({
      paramType: 5,
      status: 1
    }).then(function (data) {
      let htmlStr = ''
      let htmlObj = ''
      pm.wordParams = data.sources
      data.sources.forEach(function (item, index) {
        if (index === 0) {
          htmlStr += '<div class=\'index-report-tab flex-column  align-items-center ' + ((pm.index === index ) ? 'index-report-tab-active ff500' : 'index-report-data-item-n') + ' \' style="margin-left:0.32rem;" onclick=\'goResearch(this,100,0)\'><div>全部</div></div>'
          asemblyPage({paramKey: '100', paramValue: '全部'})
          $('.index-report-list').html('<div class="index-report-area index-report-100"></div>')
          htmlStr += '<div class=\'index-report-tab flex-column align-items-center index-report-data-item ' + ((pm.index === 1 ) ? 'index-report-tab-active ff500' : 'index-report-data-item-n') + ' \' onclick=\'goResearch(this,' + item.paramKey + ',' + (index + 1) + ')\'><div>' + item.paramValue + '</div></div>'
        }else{
          htmlStr += '<div class=\'index-report-tab flex-column align-items-center index-report-data-item ' + ((pm.index === (index + 1)  ) ? 'index-report-tab-active ff500' : 'index-report-data-item-n') + ' \' onclick=\'goResearch(this,' + item.paramKey + ',' + (index + 1) + ')\'><div>' + item.paramValue + '</div></div>'
        }

        $('.index-report-list').append('<div class="index-report-area index-report-' + item.paramKey + '"></div>')
        asemblyPage(item)
      })
      $('.index-report-data-content').html(htmlStr)
      $('.index-report-list .index-report-area').hide()
      $('.index-report-list .index-report-area').eq(pm.index).show()
      getInfoListForResearch()
    })
  }

  function goResearchTopic(funcCode) {
    jsBridge.openWindow('html/research/report-special.html?funcCode=' + funcCode,{},{noBar:false})
  }

  // o 当前对象 v 数据来源
  function goResearch(o, v,index) {
    pm.index = index
    $('.index-report-data-content .index-report-tab').removeClass('index-report-tab-active ff500')
    $(o).addClass('index-report-tab-active ff500')

    //菜单左、右移
    Template.btnLevelMove(o, window.screen.width, 'index-report-data-content', 'index-report-tab-active')

    $('.index-report-list .index-report-area').hide()
    $('.index-report-list .index-report-' + v).show()
    pm.paramKey = v
    // $('html,body').animate({scrollTop: pm[pm.paramKey].scrollHeight}, 200)//动画效果
    $('.mescroll').animate({scrollTop: pm.scrollTop}, 200)//动画效果
    if (pm[pm.paramKey].pageNum === 1 && Utils.isEmpty($('.index-report-' + v).html())) {
      getInfoListForResearch()
    }
  }

  function asemblyPage(item) {
    pm[item.paramKey] = {
      pageNum: 1,
      pageSize: 10,
      isScroll: false,
      dataSource: item.paramKey === '100' ? '' : item.paramKey,
      scrollHeight: 0
    }

  }

  //翻页
  function pageScroll() {
    $(window).scroll(function () {
      pm[pm.paramKey].scrollHeight = $(this).scrollTop()
    })
  }

  function goSearch() {
    jsBridge.openWindow('html/search/index-search.html', {}, {noBar: false})
  }

  function pageMescroll(){
    $('.mescroll').on('scroll', function () {
      pm.scrollTop = $(this).scrollTop()
      if($(this).scrollTop() >= 180){
        $('.index-report-sticky').css({'position':'fixed',top:$('.placeholder-top').height(),left:0,right:0})
      }else{
        $('.index-report-sticky').css({'position':'sticky',top:0})
      }
    })
  }
</script>
</html>
